<style scoped>
.chart-col {
  overflow: visible;
}
.pie-chart {
  height: 260px;
  width: 100%;
  margin-top: -13px;
}
.pie-chart.last {

}
.index-container {
  margin:-10px 0 -10px -10px;
  min-width: 800px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  padding: 10px;
  box-sizing: border-box;
}
.card-item{
  margin-top: 10px;
}
</style>
<template>
  <div class="index-container">
    <el-card class="box-card" >
      <div slot="header" >
        <page-part title="总体情况" :padding="1"></page-part>
      </div>
      <el-row>
        <el-col span="16"  class="chart-col">
          <v-chart class="pie-chart" :key="'chart_'+timestamp"  :option="overallOption"></v-chart>
        </el-col>
        <el-col span="8" class="chart-col">
          <v-chart class="pie-chart" :key="'chart_'+timestamp" style="margin-left: -15px;margin-top: 19px"  :option="batchBarChart"></v-chart>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card card-item">
      <div slot="header" class="clearfix">
        <page-part title="分任务统计" :padding="1"></page-part>
        <meta-select size="small" type="project-type-analysis" :beforeDisplayList="beforeMetaData" style="width:200px;float: right;margin-left: 15px" v-model="selectKey"
                     @change="(val)=>updateBySelectTypeChart(val)"></meta-select>
        <data-select size="small" style="width:200px;float: right" :data="batchDataList" v-model="queryData.batchId" @change="handleChangeBatch"></data-select>
      </div>
      <el-row>

        <el-col span="18"  class="chart-col">
        <v-chart style="width: 95%; height: 350px" :option="batchOfficeChartOption"></v-chart>
        </el-col>
        <el-col span="6"  class="chart-col">
          <v-chart style="width: 95%; height: 280px;margin-left: 45px;margin-top: 40px" :option="batchPassOption"></v-chart>
        </el-col>
      </el-row>


    </el-card>
    <el-card class="box-card card-item">
      <el-row>
        <el-col span="5"  class="chart-col">
          <v-chart style="height: 260px;width: 110%;margin-top: -13px;margin-left: 12px"  :option="batchAreaOption"></v-chart>
        </el-col>
        <el-col span="6"  class="chart-col">
          <v-chart style="height: 260px;width: 100%;margin-top: -13px;margin-left: 10px" :option="batchRegionOption"></v-chart>
        </el-col>
        <el-col span="7"  class="chart-col">
          <div >
            <v-chart  style="height: 260px;width: 115%;margin-top: -13px;margin-left: -40px" :option="batchCapacityOption"></v-chart>
          </div>
        </el-col>
        <el-col span="6"  class="chart-col">
          <div>
            <v-chart style="height: 260px;width: 110%;margin-top: -13px;margin-left: -22px"  :option="batchPoolOption"></v-chart>
          </div>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import DataSelect from "../components/data-select";
const titleStyle =  {
  color: '#130e0e',//字体颜色
  fontStyle:'normal',//字体风格
  fontWeight:'bold',//字体粗细
  fontFamily:'sans-serif',//文字字体
  fontSize:24,//字体大小
  lineHeight:28,//字体行高
  align:'center',//'left' | 'right' ，文字水平对齐方式
  verticalAlign:'middle',//'top' | 'bottom' ，文字垂直对齐方式
};
const batchOfficeChartOption={
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  color: [
    '#30c0b4',
    '#ef822f',
  ],
  legend: {top:10, },
  grid: {
    left: 0,
    right: 10,
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    axisLabel: {interval: 0},
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    // show:false,
    axisLabel: {
      show: true,
      interval: 'auto',
      formatter: '{value} '
    },
    show: true

  },
  series: [
    {
      name: '达标',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        color:'white',
        fontSize:'8',
      },
      data: []
    },
    {
      name: '未达标',
      type: 'bar',
      stack: 'Ad',
      label: {
        show: true,
        color:'white',
        fontSize:'8',

      },
      // label: {
      //   normal: {
      //     position: 'inside',
      //     show: true,
      //     color:'white',
      //     fontSize:'8',
      //     formatter: "{c}，{d}%"
      //   },
      // },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      type: 'bar',
      stack: 'Ad',
      label: {
        normal: {
          show: true,
          position:'insideBottom',
          color: '#000',
          fontSize:'8',
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(128, 128, 128, 0)'    // 仍为透明
        }
      },

      yAxisIndex:0,
      //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
      data:[]
    },
  ]

};
const CircleChartOption={
  tooltip: {
    show: true,
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c}，{d}%"
  },
  legend: {
    icon: "circle",
    itemHeight: 10,
    itemGap:15,
    orient: 'vertical',
    x: 'right',
    top: 'center',
    align: 'left',
    left: '73%',
    textStyle:{
      fontSize:13,
      fontWeight:'bold',
      color:'#989898',
    }
  },
  color:[
    "#ec808d",
    "#f59b23",
    "#f9ce93",
    "#00bfbf",
    "#807ffe"
  ],
  title: {
    text: '',
    left:'26%',
    top: '45%',
    textStyle: {
      fontWeight: 'bold',
      fontSize: '15'
    },
    subtext: '',
    subtextStyle: {
      fontWeight: 'bold',
      fontSize: '14',
      color:'black'
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '80%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          position: 'inside',
          show: true,
          color:'white',
          fontSize:'8',
          formatter: "{c}\n{d}%"
        },
      },
      data: []
    }
  ]
}
export default {
  components: {DataSelect},
  $$route: {
    meta: {
      title: '首页'
    },
    path: '/'
  },
  name: "IndexPage",
  data() {
    return {
      queryData:{batchId:''},
      overallOption: {
        color: [
          "#ec808d",
          "#f59b23",
          "#f9ce93",
          "#00bfbf",
          "#807ffe",
          "#52c1f5"
        ],
        title: [{
          text: "任务数量",
          left: "9.5%",
          top: "50%",
          textStyle: {
            fontWeight: 'bold',
            fontSize: '15'
          },
        }, {
          text: "项目数量",
          left: "33%",
          top: "50%",
          textStyle: {
            fontWeight: 'bold',
            fontSize: '15'
          },
          subText: "879个"
        }, {
          text: "基建井数",
          left: "56.5%",
          top: "50%",
          textStyle: {
            fontWeight: 'bold',
            fontSize: '15'
          },
        }, {
          text: "新建产能",
          left: "81.5%",
          top: "50%",
          textStyle: {
            fontWeight: 'bold',
            fontSize: '15'
          },
        }],
        legend: {
          selectedMode: false, // 是否允许点击
          icon: "circle",
          itemHeight: 10,
          itemGap: 15,
          left: "35%",
        },
        tooltip: {},
        dataset: {
          source: []
        },
        series: [
          {
            type: 'pie',
            label: {
              show: true,
              position: 'inside',  //center
              formatter: '{@[1]}\n{d}%',
              //formatter: '{@2014}',
              color:'white',
              fontSize: '10'
            },
            labelLine: {
              show: false
            },
            radius: ["36%", "65%"],
            center: ['13%', '58%'],   //位置
            encode: {
              itemName: "任务类型",
              value: "任务数量"
            }
            // No encode specified, by default, it is '2012'.
          },
          {
            type: 'pie',
            label: {
              show: true,
              position: 'inside',  //center
              formatter: '{@[2]}\n{d}%',
              //formatter: '{@2014}',
              color:'white',
              fontSize: '10'
            },
            labelLine: {
              show: false
            },
            radius: ["36%", "65%"],
            center: ["36.5%", "58%"],
            encode: {
              itemName: "任务类型",
              value: "项目数量"
            }
          },
          {
            type: 'pie',
            label: {
              show: true,
              position: 'inside',  //center
              formatter: '{@[3]}\n{d}%',
              //formatter: '{@2014}',
              color:'white',
              fontSize: '10'
            },
            labelLine: {
              show: false
            },
            radius: ["36%", "65%"],
            center: ['60%', '58%'],
            encode: {
              itemName: '任务类型',
              value: '基建井数'
            }
          },
          {
            type: 'pie',
            label: {
              show: true,
              position: 'inside',  //center
              formatter: '{@[4]}\n{d}%',
              //formatter: '{@2014}',
              color:'white',
              fontSize: '10'
            },
            labelLine: {
              show: false
            },
            radius: ["36%", "65%"],
            center: ['85%', '58%'],
            encode: {
              itemName: '任务类型',
              value: '新建产能'
            }
          }
        ]
      },
      batchRegionOption:JSON.parse(JSON.stringify(CircleChartOption)),
      batchPoolOption:JSON.parse(JSON.stringify(CircleChartOption)),
      batchAreaOption:JSON.parse(JSON.stringify(CircleChartOption)),
      batchCapacityOption:JSON.parse(JSON.stringify(CircleChartOption)),
      batchPassOption:JSON.parse(JSON.stringify(CircleChartOption)),
      batchTypeColorMap:{
        "投资建议计划":"#ec808d",
        "其他":"#f59b23",
        '配产方案':"#f9ce93",
        '产能建设框架计划':"#00bfbf",
        '产能标定':"#807ffe",
        '规划交底方案':"#52c1f5",
      },
      batchOfficeChartOption,
      selectKey:'totalInvest',
      timestamp:new Date().getTime(),
      officeDataList:[],
      regionDataList:[],
      poolDataList:[],
      areaDataList:[],
      capacityDataList:[],
      officeMap:{},
      regionMap:{},
      poolTypeMap:{},
      capacityMap:{},
      batchTypeMap:{},
      batchDataList:[],
      batchBarChart:{

        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} '
          },
          show: true
        },

        xAxis: {
          type: 'category',
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: false,

          },
        },
        title: {
          text: "百万吨产能投资",
          left: "32%",
          top: "7%",
          textStyle: {
            fontWeight: 'bold',
            fontSize: '15'
          },
        },
        color:[
          "#ec808d",
          "#f59b23",
          "#f9ce93",
          "#00bfbf",
          "#807ffe"
        ],
        series: [
          {
            data: [],
            label: {
              show: true,
              color:'white',
              fontSize: '10'
            },
            type: 'bar'
          }
        ]
      },
      // //chart颜色
      // chartsColors: [
      //   '#3ab1fb',
      //   '#f2a794',
      //   '#f7b430',
      //   '#c395da',
      //   '#2dcabc',
      // ],

    };
  },
  computed: {},
  created: function () {
    this.loadMetaType();
    this.loadBatchInfoList();
    this.loadOverall();
  },
  methods: {

    updateBySelectTypeChart(filterType) {
      this.loadOfficeChart(this.officeDataList,this.batchOfficeChartOption,filterType);
      this.loadPieChart(this.regionDataList,this.batchRegionOption,'region',filterType)
      this.loadPieChart(this.poolDataList,this.batchPoolOption,'pool',filterType)
      this.loadPieChart(this.areaDataList,this.batchAreaOption,'area',filterType)
      this.loadPieChart(this.capacityDataList,this.batchCapacityOption,'capacity',filterType)

    },
    beforeMetaData(list) {
      list = list.filter(function(item) {
        return item.id !== "mTProductivityInvest" && item.id !== "wellInvest" && item.id !== "wellEor" && item.id !== "unitOperateCostDollar"  && item.id !== "unitTotalOperateCostDollar"
      });
    return list
    },
    loadOfficeChart(dataList,targetOption,filterType) {
      targetOption.xAxis.data=[]
      targetOption.series[0].data=[]
      targetOption.series[1].data=[]
      targetOption.series[2].data=[]
      this.batchPassOption.series[0].data=[]
      if (!dataList || dataList.length == 0){
        return
      }

      if (!filterType) {
        filterType='totalInvest'
      }
      let passSumData = 0;
      let failedSumData = 0;
      let totalInvestPassSum = 0;
      let totalInvestFailedSum = 0;
      let totalInvestSum = 0;
       let infWellCountPassSum = 0;
       let infWellCountFailedSum = 0;
       let infWellCountSum = 0;
      let drillWellCountPassSum = 0;
      let drillWellCountFailedSum = 0;
      let drillWellCountSum = 0;
      let sumOilOutPutPassSum = 0;
      let sumOilOutPutFailedSum = 0;
      let sumOilOutPutSum = 0;
      let digit = 1;
      if (filterType == 'newCapacity') {
        digit = 2;
      }
      if (filterType == 'drillWellCount' || filterType == 'infWellCount') {
        digit = 0;
      }
      for (let item of dataList) {
        let category = ''
        category = this.officeMap[item.buildOffice]
        targetOption.xAxis.data.push(category);
        let passData = item[filterType+'Pass'] ==null?0:item[filterType+'Pass']
        let failedData = item[filterType+'Failed'] ==null?0:item[filterType+'Failed']
        if ( filterType=='wellInvest') {
          totalInvestPassSum+= item['inputTotalInvestPass'] == null?0:item['inputTotalInvestPass']
          totalInvestFailedSum+=item['inputTotalInvestFailed'] == null?0:item['inputTotalInvestFailed']
          totalInvestSum+=item['inputTotalInvestSum'] == null?0:item['inputTotalInvestSum']
          drillWellCountPassSum+=item['drillWellCountPass']==null?0:item['drillWellCountPass'];
          drillWellCountFailedSum+=item['drillWellCountFailed']==null?0:item['drillWellCountFailed'];
          drillWellCountSum+=item['drillWellCountSum']==null?0:item['drillWellCountSum'];
        } else if (filterType=='wellEor'){
          sumOilOutPutPassSum+=item['sumOilOutputPass']==null?0:item['sumOilOutputPass'];
          sumOilOutPutFailedSum+=item['sumOilOutputFailed']==null?0:item['sumOilOutputFailed'];
          sumOilOutPutSum+=item['sumOilOutputSum']==null?0:item['sumOilOutputSum'];
          infWellCountPassSum+=item['infOilWellCountPass']==null?0:item['infOilWellCountPass'];
          infWellCountFailedSum+=item['infOilWellCountFailed']==null?0:item['infOilWellCountFailed'];
          infWellCountSum+=item['infOilWellCountSum']==null?0:item['infOilWellCountSum'];
        } else {

          passSumData+=passData;
          failedSumData+=failedData;
        }


        targetOption.series[0].data.push(passData.toFixed(digit))
        targetOption.series[1].data.push(failedData.toFixed(digit))
        targetOption.series[2].data.push(item[filterType+'Sum'] ==null?0:item[filterType+'Sum'].toFixed(digit))
      }
      let sumData= passSumData+failedSumData;
      if ( filterType=='wellInvest') {
        passSumData  = totalInvestPassSum*10000 / drillWellCountPassSum;
        failedSumData=totalInvestFailedSum*10000/drillWellCountFailedSum;
        sumData=totalInvestSum*10000/drillWellCountSum;
      } else if (filterType=='wellEor') {
        passSumData=sumOilOutPutPassSum*10000/infWellCountPassSum
        failedSumData=sumOilOutPutFailedSum*10000/infWellCountFailedSum
        sumData=sumOilOutPutSum*10000/infWellCountSum
      }

      let passDataSeries ={
        name:'达标',
        value: passSumData.toFixed(digit  )
      }
      let failedDataSeries ={
        name:'未达标',
        value: failedSumData.toFixed(digit)
      }
      this.batchPassOption.legend.show=false
      this.batchPassOption.series[0].data.push(passDataSeries,failedDataSeries)
      this.batchPassOption.color=   [ '#30c0b4','#ef822f',]
      this.batchPassOption.title.text=('合计:'+(sumData).toFixed(digit))
      if (dataList.length<=4) {
        this.setBatWidth(targetOption.series,'20%')
      } else if(dataList.length<=3){
        this.setBatWidth(targetOption.series,'15%')
      } else if(dataList.length<=2){
        this.setBatWidth(targetOption.series,'15%')
      }
      if (dataList.length>=10) {
        this.setBatWidth(targetOption.series,'50%')
      }
      return targetOption

    },
    setBatWidth(seriesList, width) {
      for (let series of seriesList) {
        series.barWidth=width
      }
    },
    loadPieChart(dataList,targetOption,type,filterType) {
      targetOption.series[0].data=[]
      if (!filterType) {
        filterType='totalInvest'
      }
      for (let item of dataList) {
        let category = ''
        let title = ''
        if (type == 'pool') {
          title='油藏类型'
          category = this.poolTypeMap[item.poolType]
          targetOption.legend.left = '65%'
        } else if (type == 'region') {
          title='大区'
          category = this.regionMap[item.region]
          targetOption.legend.left = '68%'
        } else if (type == 'area') {
          title='新老区'
          category = item.areaMark == 'new' ? '新区' : '老区'
          targetOption.legend.left = '71%'
        } else if (type == 'capacity') {
          title='产能类型'
          category = this.capacityMap[item.capacityType]
          targetOption.legend.left = '60%'
        }
        let digit = 1;
        if (filterType == 'newCapacity') {
          digit = 2;
        }
        if (filterType == 'drillWellCount' || filterType == 'infWellCount') {
          digit = 0;
        }
        let data = {
          name:category,

          value: item[filterType+'Sum']==null?0:item[filterType+'Sum'].toFixed(digit)
        }
        targetOption.title.text=title
        targetOption.series[0].data.push(data)
      }
    },
    //加载评价批次数据
    loadBatchInfoList() {
      this.$get('/batch_info/data',{state:'complete',quality:'out_put'},(response)=>{
        if(!response.data||response.data.length<=0) {
          return;
        }
        this.queryData.batchId = response.data[0].id;
        this.handleChangeBatch(this.queryData.batchId)
        this.batchDataList = response.data;
      },(response)=>{

      });
    },
    //处理年份变更,重新加载数据
    handleChangeBatch(batchId) {
      for (let item of this.batchDataList){
        if (item.id == batchId) {
          this.batchInfo = item
          break;
        }
      }
      this.loadDataList(batchId)

    },
    loadMetaType() {
      this.loadBatchType();
      this.loadPoolType();
      this.loadGasPoolType();
      this.loadCompany();
      this.loadCapacityType();
      this.loadGasCapacityType();
      this.loadOilRegion();
      this.loadGasRegion();

    },
    loadBatchType () {
      this.$get("/meta/type/batch-type", {}, (response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.batchTypeMap[response.data[i].id] = response.data[i].name;
        }

      });
    },
    loadPoolType () {
      this.$get("/meta/type/oil-pool-type-new", {}, (response) => {
        this.poolTypeList = response.data;
        for (var i = 0; i < this.poolTypeList.length; i++) {
          this.poolTypeMap[this.poolTypeList[i].id] = this.poolTypeList[i].name;
        }

      });
    },

    loadGasPoolType () {
      this.$get("/meta/type/gas-pool-type", {}, (response) => {
        this.poolTypeList = response.data;
        for (let i = 0; i < this.poolTypeList.length; i++) {
          this.poolTypeMap[this.poolTypeList[i].id] = this.poolTypeList[i].name;
        }
      });
    },
    loadCapacityType () {
      this.$get("/meta/type/oil-capacity-type", {}, (response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.capacityMap[response.data[i].id] = response.data[i].name;
        }

      });
    },
    loadGasCapacityType () {
      this.$get("/meta/type/gas-capacity-type", {}, (response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.capacityMap[response.data[i].id] = response.data[i].name;
        }

      });
    },
    loadOilRegion () {
      this.$get("/meta/type/oil-region", {}, (response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.regionMap[response.data[i].id] = response.data[i].name;
        }
      });
    },
    loadGasRegion () {
      this.$get("/meta/type/gas-region", {}, (response) => {
        for (let i = 0; i < response.data.length; i++) {
          this.regionMap[response.data[i].id] = response.data[i].name;
        }
      });
    },
    //组织机构
    loadCompany: async function () {
      let officeResponse = await this.$getHttpPromise("/company/tree_by_code", {code:"DQYT"});
      let officeList = officeResponse.data[0].children.filter((item)=>{return item.type!='research'  && item.type!=null});
      for (let item of officeList) {
        this.officeMap[item.id] = item.shortName;
      }
      // this.$get("/company/name_data?type=sub_office", {}, (response) => {
      //   //response.data.unshift({id:"全部",name:"全部"});
      //   let officeMap = {};
      //   for(let item of response.data) {
      //     officeMap[item.id] = item.name;
      //   }
      //   this.officeMap = officeMap;
      //
      // });
    },
    loadOverall() {
      this.$get("/project/index/overall",{},(res)=> {
        let dataList = res.data
        let batchCountSum = 0;
        let projectCountSum = 0;
        let infWellCountSum = 0;
        let newCapacitySum=0;
        let mTonSum = 0;
        let dimensions=  ['任务类型', '任务数量', '项目数量', '基建井数', '新建产能'];
        let source = []
        let mTonList = []
        let totalInvestSum = 0;
        source.push(dimensions);
        let batchTypeDataMap = {}

        for (let item of dataList) {
          let batchType = this.batchTypeMap[item.type]
          let batchTypeData=[]
          batchTypeData.push(batchType,item.batchCount,item.projectCount,item.infWellCount,item.newCapacity)
          source.push(batchTypeData)
          batchTypeDataMap[batchType]=batchTypeData;
          batchCountSum+=item.batchCount;

          projectCountSum+=item.projectCount

          infWellCountSum+=item.infWellCount;
          newCapacitySum+=item.newCapacity;
          let color = this.batchTypeColorMap[batchType]
          let mTonData={
            name : batchType,
            value: item.mTProductivityInvest.toFixed(1),
            itemStyle: {
              color: color
            }
          }
          mTonList.push(mTonData)
          totalInvestSum+=item.totalInvest;

        }

        if (newCapacitySum==0) {
          mTonSum = 0;
        } else {
            mTonSum = totalInvestSum/newCapacitySum/100
        }
        this.overallOption.dataset.source=source

        this.overallOption.title[0].text+='\n'+batchCountSum+'个'
        this.overallOption.title[1].text+='\n'+projectCountSum+'个'
        this.overallOption.title[2].text+='\n'+infWellCountSum+'口'
        this.overallOption.title[3].text+='\n'+newCapacitySum.toFixed(2)+'万吨'
        //this.batchBarChart.
        this.batchBarChart.series[0].data=mTonList
        if (mTonSum) {
          mTonSum = mTonSum.toFixed(1)
        }
        this.batchBarChart.title.text+='\n'+mTonSum+'亿元'
        //  let element = document.getElementById('overallChart');
        // let chartsType = echarts.init(element);
        // chartsType.setOption(this.overallOption)

      })
    },
    loadDataList(batchId) {
      this.$get("/project/analysis/office",{batchId:batchId},(res)=>{
        this.officeDataList=res.data
        this.loadOfficeChart(res.data,this.batchOfficeChartOption,this.selectKey)
      })
      this.$get("/project/analysis/area",{batchId:batchId},(res)=>{
        this.areaDataList=res.data
        this.loadPieChart(res.data,this.batchAreaOption,'area',this.selectKey)
      })
      this.$get("/project/analysis/pool",{batchId:batchId},(res)=>{
        this.poolDataList=res.data
        this.loadPieChart(res.data,this.batchPoolOption,'pool',this.selectKey)
      })
      this.$get("/project/analysis/region",{batchId:batchId},(res)=>{
        this.regionDataList=res.data
        this.loadPieChart(res.data,this.batchRegionOption,'region',this.selectKey)
      })
      this.$get("/project/analysis/capacity",{batchId:batchId},(res)=>{
        this.capacityDataList=res.data
        this.loadPieChart(res.data,this.batchCapacityOption,'capacity',this.selectKey)
      })
    },

    //生成饼图配置数据
    generatePieOptions(title,dataList,showLegend) {
      let baseOption = {
        title: {text: title, left: 'center', top: 'center'},
        tooltip: {
          trigger: 'item',
          confine:true,
        },
        legend: {
          show:showLegend,
          // left: 'right',
          right:0,
          x:'right',
          top: 'middle',
          orient: 'vertical'
        },
        color: [
          '#ee617d',
          '#f8d14e',
          '#44a1fc',
        ],
        series: [
          {
            name: '项目'+title,
            type: 'pie',
            radius: ['45%', '95%'],
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: '#fff',
            //   borderWidth: 2
            // },
            label: {
              show: true,
              position: 'inside',
              // formatter: '{d}%',
              formatter: (data)=>{
                return formatFloat(data.percent,0)+'%';
              },
              fontSize: '14px',
              // color:'#fff',
              fontWeight:'bold'
              // color: 'white'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16px',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: dataList
          }
        ]
      };
      return baseOption;
    },
  },
};
</script>